<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('额度计算配置')"/>
    <style>
        .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6 {
            height: 35px !important;
        }

        [class^=col-] {
            padding-bottom: 5px;
            padding-top: 5px;
            border: 1px solid #ddd;
        }

        .text-aligin-css {
            text-align: center;
        }

        h3, h4 {
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .panel-heading {
            text-align: center;
            font-size: 24px;
        }

        .panel-body {
            padding-bottom: 0px;
            padding-top: 0px;
        }

        .flex-align-center {
            display: flex;
            justify-content: center;
        }

    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">

    <!--额度计算配置-->
    <form class="form-horizontal m" id="form-calculator-edit" th:object="${sysLoanConfiguration}" style="margin: 0px">
        <h1 style="text-align: center">个体工商户额度计算配置</h1>
        <div class="row">
            <div class="panel-body">
                <div class="panel-group">
                    <div class="panel panel-default">
                        <div class="panel-collapse collapse in">
                            <div class="panel-body">
                                <div class="container-fluid">
                                    <div class="row">
                                        <input name="loanId" th:field="*{loanId}" type="text" hidden="hidden" required>
                                        <div class="col-md-12" style="border: 0px">
                                            <div class="row">
                                                <div class="col-md-3 text-aligin-css"><h3>参数名称</h3></div>
                                                <div class="col-md-3 text-aligin-css"><h3>参数内容</h3></div>
                                                <div class="col-md-3 text-aligin-css"><h3>指标值</h3></div>
                                                <div class="col-md-3 text-aligin-css"><h3>指标说明</h3></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">家庭资产</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">家庭资产</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">家庭负债</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">家庭负债</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">
                                                    <input id="assetsLiabilitiesIndicator" name="assetsLiabilitiesIndicator" th:field="*{assetsLiabilitiesIndicator}" onchange="setIndexValue()" class="form-control" style="text-align: center" type="number" required>
                                                </div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">①贷款额度=（家庭资产-家庭负债）*<span id="assetsLiabilities"></span></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">月营业额</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">月营业额</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">
                                                    <input id="monthlyRevenueIndicator" name="monthlyRevenueIndicator" th:field="*{monthlyRevenueIndicator}" onchange="setIndexValue()" class="form-control" style="text-align: center" type="number" required>
                                                </div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">②贷款额度=月营业额*<span id="monthlyRevenue"></span></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px;font-weight: 900">最终额度</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">最终额度</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">最终额度=①或②的较小值</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var prefix = ctx + "system/configuration";
    $("#form-calculator-edit").validate({
        focusCleanup: true
    });
    setIndexValue();
    function setIndexValue() {
        $("#assetsLiabilities").html($("#assetsLiabilitiesIndicator").val());
        $("#monthlyRevenue").html($("#monthlyRevenueIndicator").val());
    }
    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/editLoanConfiguration", $('#form-calculator-edit').serialize());
        }
    }
</script>
</body>
</html>